<template>
  <div class="topic">

    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{topicNews.topic}}</el-breadcrumb-item>
    </el-breadcrumb>


    <!--        新闻列表-->
    <ul class="news_list">
      <li v-for="(item,index) in topicNews.news" :key="item._id"
          :class="['news_item',(index+1) % 5 === 0 && index > 0 ? 'underline' : '']">
        <div class="news_title">
          <router-link :to="`/newsDetail?id=${item._id}`">
            {{item.title}}
          </router-link>
        </div>
        <div class="news_time">{{item.date}}</div>
      </li>
    </ul>

  </div>
</template>

<script>
  import Header from "../components/Header"
  import Nav from "../components/Nav";

  export default {
    name: "Topic",
    data() {
      return {
        topicNews: {}
      }
    },
    created() {
      if (this.$store.state.topic.length !== 0) {
        this.$store.state.topicParameter = this.$route.query.topic
        this.topicNews = this.$store.getters.topicNews[0]
        return
      }
      this.$store.dispatch('getTopic')
        .then(() => {
          this.$store.state.topicParameter = this.$route.query.topic
          this.topicNews = this.$store.getters.topicNews[0]
          console.log(this.topicNews)
        })
    },
    components: {
      Header,
      Nav
    },
    watch: {
      '$route.query.topic': {
        handler: function () {
          this.topicNews = this.$store.getters.topicNews[0]
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .header {
    margin-bottom: 20px;
  }

  .content {
    width: 80%;
    margin: 20px auto;
  }

  .news_list {

    .news_item {
      margin: 20px 0;
      font-size: 18px;
      color: #555555;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .news_title {
        flex: 3;
        margin-right: 200px;
        padding-left: 20px;
        cursor: pointer;

        a {
          color: #555555;
        }
      }

      .news_time {
        flex: 1;
        font-size: 16px;
      }

      .divider {
        display: block;
        width: 100%;
      }
    }

    .news_item:hover a {
      color: #1479D7;
    }

    .news_item:before {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      background: #B5B5B5;
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translateY(-50%);
      border-radius: 50%;
    }
  }

  .underline {
    position: relative;
    margin-bottom: 40px !important;
  }

  .underline:after {
    display: block;
    content: '';
    width: 100%;
    border-bottom: solid 1px #ccc;
    position: absolute;
    left: 0;
    bottom: -20px;
  }

  .el-breadcrumb {
    display: flex;
    align-items: center;
  }


</style>